<template>
  <div class="container">
    <el-form :inline="true" :model="searchWords" class="search">
      <el-form-item>
        <el-input
          clearable
          placeholder="地区"
          v-model="searchWords.addrDetail"
          style="width: 150px"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD"
          style="width: 200px"
        />
      </el-form-item>
      <el-form-item>
        <el-button :icon="Search" @click="initList(1)" />
        <el-button @click="exportExcel">导出</el-button>
      </el-form-item>
    </el-form>
    <div class="table-contain">
      <Table
        ref="tableRef"
        height="100%"
        row-key="id"
        :columns="tableData.columns"
        v-loading="tableData.loading"
        :data="tableData.data"
      >
        <template #totalWatchDuration="{ row }">
          {{ convertSecondsToHMS(row.totalWatchDuration) }}
        </template>
      </Table>
    </div>
    <Page
      :page-data="pageData"
      :total="tableData.total"
      @page-no-change="(pageNum) => (pageData.pageNum = pageNum)"
      @page-size-change="(pageSize) => (pageData.pageSize = pageSize)"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from "vue";
import Table from "@/components/pageTable/table";
import { ElMessage } from "element-plus";
import Page from "@/components/pageTable/Page.vue";
import { pageVideoSumByAddr, exporVideoSumByAddr } from "@/api/totalManage.ts";
import { Search } from "@element-plus/icons-vue";
import { selectVideoList } from "@/api/videoManage.ts";
const tableRef = ref();
const date = ref<string[]>();
const videoTypeList = ref<any[]>([]);
const pageData = reactive({
  pageSize: 15,
  pageNum: 1,
});

const searchWords = ref({
  addrDetail: "",
  startTime: "",
  endTime: "",
});
const tableData = reactive({
  columns: [
    { label: "地区名称", prop: "addrDetail", width: 250 },
    { label: "观看总人数", prop: "addrUserCount", width: 150 },
    { label: "地区总人数", prop: "addrCount", width: 150 },
    { label: "观看(次)", prop: "watchTotal", width: 80 },
    { label: "总时长", prop: "totalWatchDuration", width: 160, template: true },
    { label: "下载(次)", prop: "downloadTotal", width: 80 },
  ],
  loading: false,
  total: 0,
  data: [],
});

async function initList(page: number) {
  pageData.pageNum = page || 1;
  let params = {
    pageNum: pageData.pageNum || 1,
    pageSize: pageData.pageSize,
    ...searchWords.value,
  };
  tableData.loading = true;
  const { data, msg, success } = await pageVideoSumByAddr(params);
  if (!success) {
    ElMessage.error(msg);
    tableData.loading = false;
    return;
  }
  tableData.loading = false;
  tableData.data = data?.list;
  tableData.total = data?.total;
}

async function exportExcel() {
  const data: any = await exporVideoSumByAddr(searchWords.value);

  let blob = data;
  const reader = new FileReader();

  reader.readAsDataURL(blob); // 转换为base64，可以直接放入a标签href

  reader.onload = (e) => {
    let a = document.createElement("a");
    a.style.display = "none";
    a.download = `区域观看统计`;
    a.href = <string>e?.target?.result;
    const body = document.body;
    body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };
}

async function getSelectVideoList() {
  const { success, msg, data } = await selectVideoList();
  if (!success) {
    ElMessage.error(msg);
    return;
  }
  videoTypeList.value = data;
}

function convertSecondsToHMS(seconds) {
  let hours = Math.floor(seconds / 3600);
  let minutes = Math.floor((seconds % 3600) / 60);
  let remainingSeconds = seconds % 60;
  let str = "";
  if (hours > 0) {
    str += hours + "小时";
  }
  if (minutes > 0) {
    str += minutes + "分钟";
  }
  if (remainingSeconds > 0) {
    str += remainingSeconds + "秒";
  }
  return str;
}

onMounted(async () => {
  await initList(pageData.pageNum);
  await getSelectVideoList();
});

watch(pageData, async () => {
  await initList(pageData.pageNum);
});
watch(searchWords.value, async () => {
  await initList(1);
});
watch(date, (value) => {
  searchWords.value.startTime = value?.[0] ? `${value?.[0]}` : "";
  searchWords.value.endTime = value?.[1] ? `${value?.[1]}` : "";
});
</script>

<style scoped lang="scss">
@import "@/assets/styles/common";
.statistic-item {
  display: flex;
  justify-content: center;
}
</style>
